<template>
  <div class="detail">
    <!-- 返回图标 -->
    <BackIcon></BackIcon>
    <!-- 轮播图 -->
    <Swipe :bannerArr="bannerArr"></Swipe>
    <!-- 商品详情 -->
    <GoodsInfo
      v-if="info.length != 0"
      :info="info"
      :attribute="attribute"
    ></GoodsInfo>
    <!-- 底部导航 -->
    <GoodsAction
      v-if="info.length != 0"
      :info="info"
      :productList="productList"
    ></GoodsAction>
  </div>
</template>

<script>
import GoodsAction from "@/components/GoodsAction.vue";
import GoodsInfo from "@/components/GoodsInfo.vue";
import BackIcon from "@/components/BackIcon.vue";
import Swipe from "@/components/Swipe.vue";
import { getDetailDate } from "@/utils/http.js";
export default {
  name: "Detail",
  data() {
    return {
      bannerArr: [], //轮播数组
      info: [], //商品信息数组
      attribute: [], //商品参数
      productList: [], // 产品列表
    };
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Swipe, GoodsAction, GoodsInfo, BackIcon },
  mounted() {
    // 获取参数id,请求数据
    let id = this.$route.query.id;
    if (id) {
      getDetailDate({ id: id }).then((res) => {
        // 轮播
        this.bannerArr = res.data.gallery;
        this.bannerArr.forEach((item) => {
          item.image_url = item.img_url;
        });
        // 商品信息
        this.info = res.data.info;
        // 商品参数
        this.attribute = res.data.attribute;
        //  产品列表
        this.productList = res.data.productList;
      });
    }else{this.$router.back()}
  },
};
</script>

<style scope lang='less'>
.van-swipe-item {
  width: 100%;
  height: 30%;
}
</style>